<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div-content{
            <!--/*-->设置边框圆角<!--*/-->
            background-color:white;
            border-radius: 5px;
            padding: 15px;
          }
        .layui-btn-container .layui-btn{
            border-radius: 15px;
            height:15%;
        }


                   .table-search-fieldset {
                         margin: 0;
                         border: 1px solid #e6e6e6;
                         padding: 10px 20px 5px 20px;
                         color: #6b6b6b;

                     }
        <!--/*-->引入layui的模板<!--*/-->
    </style>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">

</head>
<body>
<div class="div-content">
    <form class="layui-form layui-form-pane" id="form-search">
    <fieldset class="table-search-fieldset">
        <legend>搜索条件</legend>
        <div class="layui-form-item">
            <!--/* layui的模板框*/-->
            <div class="layui-inline">
                <label class="layui-form-label">特工姓名</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--/* layui的模板框*/-->
            <div class="layui-inline">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input date">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input date">
                </div>
            </div>
            <!--/* 搜索按钮*/-->
            <div class="layui-inline">
                <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                  <i class="layui-icon layui-icon-search"></i>搜索</button>
                <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-normal">
                    <i class="layui-icon layui-icon-refresh"></i>重置
                </button>

            </div>



        </div>

    </fieldset>
    </form>
    <table id="table-emp" lay-filter="table-emp-filter"></table>

</div>
<script type="text/html" id="convertDept">
{{#
return d.dept.deptName;
}}
</script>

<script type="text/html" id="table-emp-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">
            <i class="layui-icon layui-icon-add-circle-fine" ></i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
            <i class="layui-icon layui-icon-delete" ></i>删除</button>

    </div>
</script>
<script type="text/html" id="col-emp-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">


    function refreshTable(){
        $("#btn-reset").click();
     $("#btn-search").click();
    }


    layui.use(['laydate','table','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
        //触发事件
        table.on('toolbar(table-emp-filter)', function(obj){
          if(obj.event=='add'){
              layer.open({
                  title:'新增员工',
                  area: ['100%', '100%'],
                  type: 2,
                  content:'/add/ui',//跳转请求的地址（控制层）
              });
          }else if(obj.event=='delete'){
             // alert('delete');
              var checkStatus = table.checkStatus('table-emp'); //idTest 即为基础参数 id 对应的值
              //console.log(checkStatus)
              //如果没有选中任何数据
              if(checkStatus.data.length==0){
                 layer.alert('您没有选中数据', {icon: 2,anim:6,title:"警告"});
                  return false;
              }
               var idArr = new Array();
               $(checkStatus.data).each(function () {
                   idArr.push(this.empId);
              });
              layer.confirm('您确认删除选中记录吗?', {icon: 3, title:'删除确认'}, function(index){
                  //异步请求删除数据 成功刷新表格

                  var url ="/{ids}"+idArr.join(",");
                  var params={
                      _method:"DELETE"
                  };
                  $.post(url,params,function (response) {
                      if(response.code==0){
                          layer.msg(response.message, {icon: 1});
                          refreshTable();
                      }else{
                          layer.alert(response.message, {icon: 2,anim:6});
                      }

                  });

                  layer.close(index);
              });


          }

        });

        //执行一个laydate实例
        laydate.render({
            elem: '.date' //指定元素
        });
        //员工表格选染
        //templet:"#convertDept" 函数转换
        table.render({
            elem: '#table-emp'
            ,toolbar:'#table-emp-toolbar'
            ,url: '/list' //数据接口
            ,page: true //开启分页
            ,limits:[5,10,30,50,100]//设置一页展示的数量
            ,cols: [[ //表头
                {type:"checkbox",width:80},
                {field: 'empId', title: '特工编号', width:120, sort: true,align:'center'}
                ,{field: 'name', title: '姓名', width:120,align:'center'}
                ,{field: 'sex', title: '性别', width:100, sort: true,align:'center'}
                ,{field: 'age', title: '年龄', width:100,align:'center'}
                ,{field: 'sal', title: '工资', width:120,align:'center'}
                ,{field: 'dept', title: '部门', width:120, sort: true,align:'center',templet:"#convertDept"}
                ,{field: 'birthday', title: '生日', width:120, sort: true,align:'center'}
                ,{field: 'address', title: '家庭住址',align:'center'}
                ,{title: '操作', winth:150,toolbar:"#col-emp-toolbar"}
            ]]
        });
        //监听表单提交
        form.on('submit(btn-search-filter)', function(data){
            console.log(data.field)//当前容器的全部表单字段，名值对形式：{name: value}
            //刷新表格
            table.reload('table-emp', {
                where: { //设定异步数据接口的额外参数，任意设
                    name:data.field.name,
                    startDate:data.field.startDate,
                    endDate:data.field.endDate,
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //工具条事件
        //监听操作列
        table.on('tool(table-emp-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
           if(layEvent=='del'){
               layer.confirm('您确认删除该特工：'+data.name+"?", {icon: 3, title:'删除确认'}, function(index){
                   //异步请求删除数据 成功刷新表格

                   var url ="/{ids}"+data.empId;
                   var params={
                       _method:"DELETE"
                   };
                   $.post(url,params,function (response) {
                       if(response.code==0){
                           layer.msg(response.message, {icon: 1});
                           refreshTable();
                       }else{
                           layer.alert(response.message, {icon: 2,anim:6});
                       }

                   });

                   layer.close(index);
               });

           }else if(layEvent=='edit'){
               layer.open({
                   title:'修改员工',
                   area: ['100%', '100%'],
                   type: 2,
                   content:'/getOne/'+data.empId //跳转请求的地址（控制层）
               });
           }

        });
    });
    </script>
</body>
</html>